<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>帮帮忙</title>
    <script src="../../dist/thes.min.js"></script>
  </head>
  <body>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .chat {
        background: #fff;
        border-radius: 7px;
        display: none;
        padding: 5px 10px;
        max-width: 100px;
        position: relative;
      }
      .chat::after {
        content: '';
        display: inline-block;
        position: absolute;
        left: calc(50% - 10px);
        top: 97%;
        border: 10px solid #fff;
        border-color: #fff transparent transparent transparent;
      }
    </style>

    <script>
      // return;
      let xw;
      let xl;
      const th = new Thes({
        el: document.body,
        view: 800,
        loading: true,
        light: Thes.getDefaultLightOptions,
        camera: {
          type: 'PerspectiveCamera',
          position: {
            x: 800,
            y: 800,
            z: 800,
          },
          PerspectiveCameraOption: {
            fov: 50,
            aspectRatio: window?.innerWidth / window?.innerHeight,
            near: 0.1,
            far: 10000,
          },
        },
        background: [
          '../assets/px.jpg',
          '../assets/nx.jpg',
          '../assets/py.jpg',
          '../assets/ny.jpg',
          '../assets/pz.jpg',
          '../assets/nz.jpg',
        ],
      });

      th.on('loaded', () => {
        console.log('加载成功');
        th.setCenter({x:100,y:0,z:10})
        // th.setFog({ color: 'rgb(243,233,233)',near:1,far:800 });
      });
      th.on('progress', e => {
        console.log(e);
      });
      // th.createState()
    </script>
    <script src="./key.js"></script>
    <script src="./chat.js"></script>
    <script src="./scene.js"></script>
  </body>
</html>
